<template>
  <view class="container">
    <my-navbar title="数据统计"></my-navbar>
    <!-- 供应商信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <image
          class="avatar"
          :src="store.state.user.userInfo.avatar_url"
          mode="aspectFill"
        ></image>
        <view class="info">
          <view class="name">{{ supplierInfo.name }}</view>
          <view class="contact">
            <text>{{ supplierInfo.contact_name }}</text>
            <text>{{ supplierInfo.contact_phone }}</text>
          </view>
        </view>
      </view>
      <view class="account-info">
        <view class="account-item">
          <view class="amount">{{ supplierInfo.bill_amount }}</view>
          <view class="label">总收入</view>
        </view>
        <view class="account-item">
          <view class="amount">{{ supplierInfo.bill_amount_freeze }}</view>
          <view class="label">冻结金额</view>
        </view>
        <view class="account-item">
          <view class="amount">{{ supplierInfo.bill_amount_withdrawn }}</view>
          <view class="label">可提现金额</view>
        </view>
      </view>
    </view>

    <!-- 功能入口 -->
    <view class="function-list">
      <view class="function-item" @click="navigateTo('/pages/supplier/order')">
        <u-icon name="order" class="icon" size="40rpx"></u-icon>
        <text>订单管理</text>
        <up-icon name="arrow-right" color="#999"></up-icon>
      </view>
      <view
        class="function-item"
        @click="navigateTo('/pages/supplier/aftercare')"
      >
        <u-icon name="file-text" class="icon" size="40rpx"></u-icon>
        <text>售后管理</text>
        <up-icon name="arrow-right" color="#999"></up-icon>
      </view>
      <view class="function-item" @click="navigateTo('/pages/user/bank/list')">
        <u-icon name="photo" class="icon" size="40rpx"></u-icon>
        <text>我的银行卡</text>
        <up-icon name="arrow-right" color="#999"></up-icon>
      </view>
      <view
        class="function-item"
        @click="navigateTo('/pages/supplier/withdraw')"
      >
        <u-icon name="red-packet" class="icon" size="40rpx"></u-icon>
        <text>财务管理</text>
        <up-icon name="arrow-right" color="#999"></up-icon>
      </view>
    </view>

    <!-- 联系信息 -->
    <view class="contact-info">
      <view
        class="contact-item"
        @click="handleCall(supplierInfo.contact_phone)"
      >
        <view>联系人: {{ supplierInfo.contact_name }}</view>
        <view class="phone">
          <text>{{ supplierInfo.contact_phone }}</text>
          <up-icon name="phone-fill" size="16" color="#222"></up-icon>
        </view>
      </view>
    </view>

    <view style="margin-top: 20rpx">
      <u-button type="error" @click="handleLogout">退出登录</u-button>
    </view>

    <my-tabbar current-page="/pages/supplier/member"></my-tabbar>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import { onShow } from "@dcloudio/uni-app";

const store = useStore();

// 计算属性
const supplierInfo = computed(() => store.state.user.supplierInfo);

console.log(supplierInfo.value);

// 方法
const navigateTo = (url) => {
  uni.navigateTo({ url });
};

const handleCall = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};

function handleLogout() {
  uni.showModal({
    title: "提示",
    content: "确定要退出登录吗？",
    success: (res) => {
      if (res.confirm) {
        store.dispatch("logout");
      }
    },
  });
}

function toBankList() {
  uni.navigateTo({
    url: "/pages/supplier/bank/list",
  });
}

// 页面显示时触发
onShow(() => {
  // 可以在这里添加页面显示时的逻辑
});
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.user-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .info {
      flex: 1;

      .name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .contact {
        font-size: 28rpx;
        color: #666;

        text {
          margin-right: 20rpx;
        }
      }
    }
  }

  .account-info {
    display: flex;
    justify-content: space-between;
    text-align: center;

    .account-item {
      flex: 1;

      .amount {
        font-size: 36rpx;
        font-weight: bold;
        color: #ff2b2b;
        margin-bottom: 10rpx;
      }

      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .function-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;

    .icon {
      margin-right: 20rpx;
    }

    text {
      flex: 1;
      font-size: 30rpx;
    }
  }
}

.contact-info {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;

  .contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .phone {
      display: flex;
      align-items: center;

      text {
        margin-right: 10rpx;
      }
    }
  }
}
</style>
